<!--
 * @author: Kate-sy
 * @create: 2021-06-24 15:31 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-24 17:00 PM
 * @desc: 相关推荐
-->
<template>
  <div class="dation-contaner">
    <div class="dat-top">相关推荐</div>
    <div class="dat-item" :key="item.title" v-for="item in datitemdata">
      <div class="dat-left">
        <div class="titel">{{ item.title }}</div>
        <div class="zan">
          <span>{{ item.zan }} 赞</span>
          <div class="point"></div>
          <span>{{ item.pl }} 评论</span>
        </div>
      </div>
      <div class="dat-right">
        <img :src="item.img" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Relate",
  data() {
    return {
      datitemdata: [
        {
          title: "填空题第一题：输入流、输出流",
          zan: "5",
          pl: "4",
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00faabff33504e4b86a4a4e4c7e4c8d2~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.image",
        },
        {
          title: "判断题三的答案：错误",
          zan: "0",
          pl: "9",
          img: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5117763e6a3b478a953c6c7b31463bed~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.image",
        },
        {
          title: "问答题一的答案：一、编程思想不同1、面向过程：是一类以对象",
          zan: "0",
          pl: "3",
          img: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e2d612f1b48486fa18f10b433002f25~tplv-k3u1fbpfcp-zoom-mark-crop-v2:460:460:0:0.image",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.dation-contaner {
  background-color: #fff;
  box-shadow: 0 4px 3px -3px #eee;
  .dat-top {
    padding: 13px 16px;
    @include font(15px, #2e3135, 550);
    border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
  }
  .dat-item {
    width: 268px;
    margin: auto;
    padding: 12px 0 12px 0;
    @include flex(space-between);
    border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
    .dat-left {
      width: 188px;
      @include font(14px, #2e3135);
      .titel {
        @include hidden(2);
        margin-bottom: 15px;
      }
      .zan {
        display: flex;
        @include font(13px, #76797e);
        align-items: center;
        .point {
          width: 2px;
          height: 2px;
          border-radius: 2px;
          background-color: #76797e;
          margin: 0 4px;
        }
      }
    }
    .dat-right {
      img {
        width: 68px;
        height: 68px;
      }
    }
  }
}
</style>